import {createRouter, createWebHistory} from 'vue-router'

const routes =[
    {
        path: '/',
        name: 'index',
        // alias: '/home',是别名，当访问/home时，会自动跳转到/
        // 此时可以使用localhost:8080和localhost:8080/home访问同一个页面
        // alias可以编写为数组形式，例如alias: ['/home', '/index']
        alias: '/home',
        component: () => import('@/views/index.vue')
    },
    {
        path: '/content',
        name: 'content',
        component: () => import('@/views/content.vue')
    },
    {
        // 如果name加上问号，则name不是必须的参数
        path: '/user/:id/name/:name?',
        // 定义别名跳转的是真实的路径，而定义的name只是取用的值，而非真实的路径
        name: 'member',
        component: () => import('@/views/user.vue')
    },
    {
        path:'/vip',
        component: () => import('@/views/vip.vue'),
        // 路由嵌套下面是子路由
        children:[
            {
                path: 'order',//http://localhost:8080/vip/order
                component: () => import('@/views/vip/order.vue')
            },
            {
                path: '',//空的就是默认页 http://localhost:8080/vip 直接会进入到default页面
                // 在vip.vue中定义了<router-view></router-view>，所以会显示default页面
                // 此时最好不要在vip.vue中定义其他东西了，否则容易显示错乱
                component: () => import('@/views/vip/default.vue')
            },
            {
                path: 'info',
                component: () => import('@/views/vip/info.vue')
            }
        ]
    },
    {
        path: '/svip',
        // redirect: '/vip'
        redirect: {
            name: 'member',params: {id: 123, name: '张三'}
        }
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router